import ls from '@/utils/Storage'
import { updateDarkMode } from '@/components/SettingDrawer/settingConfig'
import defaultSettings from '@/config/defaultSettings'
import {
  SITE_SETTINGS,
  SET_SIDEBAR_TYPE,
  TOGGLE_DEVICE,
  TOGGLE_FIXED_HEADER,
  TOGGLE_CONTENT_WIDTH,
  TOGGLE_COLOR,
  TOGGLE_WEAK,
  TOGGLE_MULTI_TAB,
  SET_SETTING_DRAWER,
  TOGGLE_FIXED_SIDERBAR,
  TOGGLE_FIXED_HEADER_HIDDEN,
  TOGGLE_GRAY,
  TOGGLE_THEME,
  TOGGLE_LAYOUT_MODE,
  CLOSE_SIDEBAR,
  SET_DARK_MODE,
  SET_LOCK_SCREEN,
  TOGGLE_SELECT_MENU,
  TOGGLE_LOADING,
  TOGGLE_ANIMATE,
  TOGGLE_ANIMATE_DISABLE,
  TOGGLE_ANIMATE_DIRECTION,
  MENU_CHANGE,
  TOGGLE_APP,
  DEVICE_TYPE
} from '@/store/mutation-types'
const app = {
  state: Object.assign(
    {
      lockScreen: false,
      loading: false,
      sidebarOpened: true,
      device: DEVICE_TYPE.DESKTOP,
      menuChangeFlag: false,
      currentApp: 'portal'
    },
    defaultSettings
  ),
  mutations: {
    [SET_SIDEBAR_TYPE]: (state, type) => {
      state.sidebar = type
      cache({ [SET_SIDEBAR_TYPE]: type })
    },
    [TOGGLE_APP]: (state, app) => {
      state.currentApp = app
    },
    [CLOSE_SIDEBAR]: (state) => {
      cache({ [CLOSE_SIDEBAR]: true })
      state.sidebar = false
    },
    [TOGGLE_DEVICE]: (state, device) => {
      state.device = device
    },
    // 深浅主题
    [TOGGLE_THEME]: (state, theme) => {
      cache({ [TOGGLE_THEME]: theme })
      state.navTheme = theme
      // 开启深浅主题时关闭黑夜模式
      if (state.darkMode) {
        setDarkMode(state, false)
      }
    },
    [TOGGLE_LOADING]: (state, val) => {
      state.loading = val
    },
    [TOGGLE_SELECT_MENU]: (state, val) => {
      state.selectedMenu = val
    },
    [SET_DARK_MODE]: (state, isDark) => {
      setDarkMode(state, isDark)
      // 开启黑夜模式时设置主题为黑色
      if (isDark) {
        state.navTheme = 'dark'
      }
    },
    [MENU_CHANGE]: (state, isDark) => {
      state.menuChangeFlag = !state.menuChangeFlag
    },
    [TOGGLE_LAYOUT_MODE]: (state, layout) => {
      // 左侧菜单的话就用流式布局
      if (layout === 'sidemenu' || layout === 'mixmenu') {
        state.contentWidth = 'Fluid'
        cache({ [TOGGLE_CONTENT_WIDTH]: 'Fluid' })
      }
      cache({ [TOGGLE_LAYOUT_MODE]: layout })
      state.layout = layout
    },
    [TOGGLE_FIXED_HEADER]: (state, fixed) => {
      cache({ [TOGGLE_FIXED_HEADER]: fixed })
      state.fixedHeader = fixed
    },
    [TOGGLE_FIXED_SIDERBAR]: (state, fixed) => {
      cache({ [TOGGLE_FIXED_SIDERBAR]: fixed })
      state.fixSidebar = fixed
    },
    [TOGGLE_FIXED_HEADER_HIDDEN]: (state, show) => {
      cache({ [TOGGLE_FIXED_HEADER_HIDDEN]: show })
      state.autoHideHeader = show
    },
    [TOGGLE_CONTENT_WIDTH]: (state, type) => {
      cache({ [TOGGLE_CONTENT_WIDTH]: type })
      state.contentWidth = type
    },
    [TOGGLE_COLOR]: (state, color) => {
      cache({ [TOGGLE_COLOR]: color })
      state.primaryColor = color
    },
    [TOGGLE_WEAK]: (state, flag) => {
      cache({ [TOGGLE_WEAK]: flag })
      state.colorWeak = flag
    },
    [TOGGLE_GRAY]: (state, flag) => {
      cache({ [TOGGLE_GRAY]: flag })
      state.grayMode = flag
    },
    [TOGGLE_MULTI_TAB]: (state, bool) => {
      cache({ [TOGGLE_MULTI_TAB]: bool })
      state.multiTab = bool
    },
    [SET_SETTING_DRAWER]: (state, type) => {
      state.showSettings = type
    },
    [SET_LOCK_SCREEN]: (state, flag) => {
      state.lockScreen = flag
      cache({ [SET_LOCK_SCREEN]: flag })
      document.getElementById('app')!.style.overflow = flag ? 'hidden' : 'visible'
    },
    [TOGGLE_ANIMATE]: (state, animate) => {
      cache({ [TOGGLE_ANIMATE]: animate })
      state.animate = animate
    },
    [TOGGLE_ANIMATE_DIRECTION]: (state, val) => {
      cache({ [TOGGLE_ANIMATE_DIRECTION]: val })
      state.animateDirection = val
    },
    [TOGGLE_ANIMATE_DISABLE]: (state, val) => {
      cache({ [TOGGLE_ANIMATE_DISABLE]: val })
      state.animateDisable = val
    }
  }
}

function cache(o) {
  ls.setObj(SITE_SETTINGS, o)
}
function setDarkMode(state, isDark) {
  cache({ [SET_DARK_MODE]: isDark })
  updateDarkMode(isDark)
  state.darkMode = isDark
}

export default app
